<template>
  <div>
      <mt-header fixed title="首页"></mt-header>
			<div class="content">
				<mt-swipe :auto="4000">
				
				<mt-swipe-item v-for="item in swipeArr" :key="item.url">
					<img :src="item.img" alt="">
				</mt-swipe-item>
			</mt-swipe>
      <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <a href="#">
		                    <img src="../images/menu3.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div>
                        </a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <a href="#">
		                    <img src="../images/menu4.png" alt="">
		                    <div class="mui-media-body">图片分享</div>
                        </a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <a href="#">
		                    <img src="../images/menu5.png" alt="">
		                    <div class="mui-media-body">商品购买</div>
                        </a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <a href="#">
		                    <img src="../images/menu6.png" alt="">
		                    <div class="mui-media-body">留言反馈</div>
                        </a>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../images/menu9.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a>
                </li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                   <img src="../images/menu10.png" alt="">
		                    <div class="mui-media-body">联系我们</div></a>
                </li>
		        
		        </ul> 
			</div>
      
  </div>
	
</template>
<script>
export default {
  data() {
    return {
      msg: "我是首页",
      swipeArr: []
    };
  },
  created() {
    this.getSwiper();
  },
  methods: {
    getSwiper() {
      this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
        if (result.body.status == 0) {
          this.swipeArr = result.body.message;
          console.log(this.swipeArr);
        } else {
          Toast("加载失败");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content .mint-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.mui-grid-view.mui-grid-9,
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: none;
  background: #fff;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell img {
  width: 50px;
  height: 50px;
}
</style>



